import React, {FC, ButtonHTMLAttributes, AnchorHTMLAttributes} from "react";
import classNames from "classnames";

export type ButtonSize = "large" | "small";
export type ButtonType = "primary" | "default" | "danger" | "link";

interface BaseButtonProps {
    children: React.ReactNode,
    size?: ButtonSize,
    type?: ButtonType,
    className?: string,
    disabled?: boolean,
    href?: string
}

type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement>
type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLElement>
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>

const Button: FC<ButtonProps> = (props) => {
    const {
        children,
        size,
        type,
        className,
        disabled,
        href,
        ...restProps
    } = props;

    const classes = classNames('btn', className, {
        [`btn-${type}`]: type,
        [`btn-${size}`]: size,
        'disabled': (type === 'link') && disabled
    })

    if (type === 'link' && href) {
        return (
            <a className={classes} href={href} {...restProps}>{children}</a>
        )
    } else {
        return (
            <button className={classes} disabled={disabled} {...restProps}>{children}</button>
        )
    }
}

Button.defaultProps = {
    disabled: false
}

export default Button;